<template>
    <div class="versiuo_info_list">
        <div v-for="item in version" :title="`${item.name}:${item.version}`">{{ item.name }} : {{ item.version }}</div>
    </div>
</template>
<script setup lang="ts">
import { inject, onMounted, onBeforeUnmount, ref } from "vue";
import { XbsjEarthUi } from '../../../scripts/xbsjEarthUi';
import { createAnimateFrameWithStartValues } from 'xbsj-xe2/dist-node/xe2-utils';
import { Message } from "earthsdk-ui";
import { ESViewer } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import {getEarthuiVersion} from "../../../scripts/earthuiVersion"
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const version = ref<{ name: string, version: string }[]>([])
const earthUiVersion = getEarthuiVersion()
function getValueBeforeFirstComma(str: string) {
    var parts = str.split('/');
    return parts[0];
}
function getValueBeforeFirstComma2(str: string) {
    var parts = str.split(' ');
    return parts[2];
}
const getVersion = () => {
    const viewers = [...xbsjEarthUi.viewers]
    if (viewers.length <= 1) {
        const viewer = xbsjEarthUi.activeViewer
        if (viewer) {

            const v: any = []
            const versions = [...viewer.getVersion()]
            versions.forEach(item => {
                const a = getValueBeforeFirstComma(item)
                const b = getValueBeforeFirstComma2(item)
                if (item.startsWith('Cesium')) {
                    v.push({ name: 'Cesium', version: b })
                }else if (item.startsWith('earth-ui')) {
                    v.push({ name: 'earth-ui', version: earthUiVersion })
                } else if (item.startsWith('ESForUE')) {
                    v.push({ name: 'ESForUE', version: b })
                } else if (item.startsWith('UnrealEngine')) {
                    v.push({ name: 'UnrealEngine', version: b })
                } else {
                    v.push({ name: a, version: b })
                }
            })
            version.value = v
        }
        // 24.07.15
    } else {
        let viewer1: ESViewer
        let viewer2: ESViewer
        viewers.forEach(item => {
            if (item.typeName === 'ESCzmViewer') {
                viewer1 = item
                return
            } else if (item.typeName === 'ESUeViewer') {
                viewer2 = item
                return
            }
        })
        const v: any = []
        //@ts-ignore
        if (viewer1) {
            const versions = [...viewer1.getVersion()]
            versions.forEach(item => {
                const a = getValueBeforeFirstComma(item)
                const b = getValueBeforeFirstComma2(item)
                if (a.startsWith('Cesium')) {
                    v.push({ name: 'Cesium', version: b })
                }else if (item.startsWith('earth-ui')) {
                    v.push({ name: 'earth-ui', version: earthUiVersion })
                } else {
                    v.push({ name: a, version: b })
                }
            })
            version.value = v
        }
        //@ts-ignore
        if (viewer2) {
            const versions = [...viewer2.getVersion()]
            const a = getValueBeforeFirstComma2(versions[versions.length - 2])
            const b = getValueBeforeFirstComma2(versions[versions.length - 1])
            v.push({ name: 'ESForUE', version: a })
            v.push({ name: 'UnrealEngine', version: b })
            version.value = v
        }
    }
}
onMounted(() => {
    getVersion()
})
</script>
<style scoped>
.versiuo_info_list {
    position: fixed;
    right: 5px;
    bottom: 35px;
    min-width: 200px;
    max-width: 300px;
    /* height: 200px; */
    background: rgba(37, 38, 42, 1);
    z-index: 200;
    border: 1px solid rgba(180, 180, 180, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    padding: 3px 10px;
}

.versiuo_info_list>div {
    width: 100%;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
</style>